<template>
  <el-dialog
    append-to-body
    title="修改"
    :visible.sync="dialogVisible"
    width="800px"
  >
    <vxe-form
      :data="form"
      :items="formConfig.items"
      :rules="formConfig.rules"
      :title-align="formConfig.titleAlign"
      title-colon
      :title-width="formConfig.titleWidth"
      @submit="submit"
    >
      <template #baseSet>
        <el-divider content-position="left">
          <b class="color-primary">灌溉参数设置</b>
        </el-divider>
      </template>
      <template #irrSet>
        <el-divider content-position="left">
          <b class="color-primary">灌溉参数设置</b>
        </el-divider>
      </template>
      <template #picture>
        <img-upload
          :image-url="imageUrl"
          name="device"
          @beforeUpload="beforeUpload"
          @onSuccess="onSuccess"
        />
      </template>
      <template #dclass>
        <vxe-select
          v-model="form.settings.dclass"
          clearable
          filterable
          :options="dclassOptions"
          placeholder="请选择"
        />
      </template>
      <template #area>
        <el-input
          v-model="form.settings.area"
          clearable
          placeholder="地块面积"
          type="number"
        >
          <template slot="append">亩</template>
        </el-input>
      </template>
      <template #amount>
        <el-input
          v-model="form.settings.amount"
          clearable
          placeholder="喷头数量"
          type="number"
        >
          <template slot="append">个</template>
        </el-input>
      </template>
      <template #radius>
        <el-input
          v-model="form.settings.radius"
          clearable
          placeholder="喷灌机长度"
          type="number"
        >
          <template slot="append">m</template>
        </el-input>
      </template>
      <template #fkq_amount>
        <el-input
          v-model="form.settings.fkq_amount"
          clearable
          placeholder="喷头阵列数量"
          type="number"
        >
          <template slot="append">套</template>
        </el-input>
      </template>
      <template #distance>
        <el-input
          v-model="form.settings.distance"
          clearable
          placeholder="喷头间距"
          type="number"
        >
          <template slot="append">m</template>
        </el-input>
      </template>
      <template #mdptsc>
        <el-input
          v-model="form.settings.mdptsc"
          clearable
          placeholder="末端喷头射程"
          type="number"
        >
          <template slot="append">m</template>
        </el-input>
      </template>
      <template #flow>
        <el-input
          v-model="form.settings.flow"
          clearable
          placeholder="入机流量"
          type="number"
        >
          <template slot="append">m³/h</template>
        </el-input>
      </template>
      <template #pressure>
        <el-input
          v-model="form.settings.pressure"
          clearable
          placeholder="入机压力"
          type="number"
        >
          <template slot="append">MPa</template>
        </el-input>
      </template>
    </vxe-form>
  </el-dialog>
</template>

<script>
  import { deepClone } from '@/utils'
  import { updateOne } from '@/api/deviceCloud'
  import ImgUpload from '@/components/ImgUpload'
  export default {
    components: {
      ImgUpload,
    },
    data() {
      return {
        activeName: 'first',
        dialogVisible: false,
        dclassOptions: [
          { label: '指针式喷灌机', value: 1 },
          { label: '平移式喷灌机', value: 2 },
          { label: '卷盘式喷灌机', value: 3 },
        ],
        form: {
          name: '',
          descri: '',
          picture: '',
          lat: '',
          lng: '',
          settings: {
            dclass: '',
            area: '',
            radius: '',
            amount: '',
            distance: '',
            fkq_amount: '',
            yltjq: '',
            mdptsc: '',
            flow: '',
            pressure: '',
            autoIrr: '',
            distances: [],
          },
        },
        formConfig: {
          titleWidth: 110,
          titleAlign: 'right',
          items: [
            {
              field: 'baseSet',
              title: '',
              span: 24,
              slots: { default: 'baseSet' },
            },
            {
              field: 'name',
              title: '名称',
              span: 12,
              itemRender: {
                name: '$input',
                props: { placeholder: '名称', clearable: true },
              },
            },
            {
              field: 'dclass',
              title: '设备类型',
              span: 12,
              slots: { default: 'dclass' },
            },
            {
              field: 'lng',
              title: '所在经度',
              span: 12,
              itemRender: {
                name: '$input',
                props: { placeholder: '经度', clearable: true },
              },
            },
            {
              field: 'lat',
              title: '所在纬度',
              span: 12,
              itemRender: {
                name: '$input',
                props: { placeholder: '纬度', clearable: true },
              },
            },
            {
              field: 'area',
              title: '地块面积',
              span: 12,
              slots: { default: 'area' },
            },
            {
              field: 'radius',
              title: '喷灌机长度',
              span: 12,
              slots: { default: 'radius' },
            },
            {
              field: 'amount',
              title: '喷头数量',
              span: 12,
              slots: { default: 'amount' },
            },
            {
              field: 'distance',
              title: '喷头间距',
              span: 12,
              slots: { default: 'distance' },
            },
            {
              field: 'fkq_amount',
              title: '喷头阵列数量',
              span: 12,
              slots: { default: 'fkq_amount' },
            },
            {
              field: 'picture',
              title: '设备图片',
              span: 12,
              slots: { default: 'picture' },
            },
            {
              field: 'irrSet',
              title: '',
              span: 24,
              slots: { default: 'irrSet' },
            },
            {
              field: 'settings.yltjq',
              title: '压力调节器',
              span: 12,
              itemRender: {
                name: '$input',
                props: {
                  placeholder: '压力调节器型号',
                  clearable: true,
                },
              },
            },
            {
              field: 'mdptsc',
              title: '末端喷头射程',
              span: 12,
              slots: { default: 'mdptsc' },
            },
            {
              field: 'flow',
              title: '入机流量',
              span: 12,
              slots: { default: 'flow' },
            },
            {
              field: 'pressure',
              title: '入机压力',
              span: 12,
              slots: { default: 'pressure' },
            },
            {
              field: 'settings.autoIrr',
              title: '自动灌溉',
              span: 12,
              itemRender: {
                name: '$switch',
                props: {
                  placeholder: '自动灌溉',
                  openLabel: '打开',
                  closeLabel: '关闭',
                  openValue: 1,
                  closeValue: 0,
                },
              },
            },
            {
              span: 24,
              align: 'left',
              className: 'pl110',
              itemRender: {
                name: '$buttons',
                children: [
                  {
                    props: {
                      type: 'submit',
                      content: '提交',
                      icon: 'el-icon-document',
                      status: 'primary',
                    },
                  },
                  {
                    props: {
                      type: 'reset',
                      content: '重置',
                      icon: 'el-icon-refresh',
                    },
                  },
                ],
              },
            },
          ],
          rules: {
            name: [{ required: true, message: '请输入名称' }],
          },
          cellsFormater: [],
        },
      }
    },
    computed: {
      imageUrl() {
        if (this.form.picture) {
          let prefix = ''
          if (!/http:\/\/|https:\/\//.test(this.form.picture)) {
            prefix = `http://api.zesi.com.cn`
          }
          return prefix + this.form.picture
        }
        return ''
      },
    },
    methods: {
      show(row) {
        this.dialogVisible = true
        console.log(row)
        this.form = deepClone(row)
      },

      async submit() {
        const { serialno, name, lat, lng, descri, picture, settings } =
          this.form
        const postData = {
          serialno,
          name,
          lat,
          lng,
          descri,
          picture,
          settings,
        }
        const { msg } = await updateOne(serialno, postData)
        this.$baseMessage(msg, 'success', 'vab-hey-message-success')
        this.dialogVisible = false
        this.$store.dispatch('device/getAll', { project_id: 11 })
      },

      onSuccess(data) {
        this.form.picture = data.imgUrl
      },
      beforeUpload(file) {
        const isJPG = file.type === 'image/jpeg'
        const isLt2M = file.size / 1024 / 1024 < 2

        if (!isJPG) {
          this.$message({
            message: '上传图片只能是 JPG 格式!',
            type: 'error',
            showClose: true,
          })
        }
        if (!isLt2M) {
          this.$message({
            message: '上传图片大小不能超过 2MB!',
            type: 'error',
            showClose: true,
          })
        }
        return isJPG && isLt2M
      },
    },
  }
</script>

<style lang="scss" scoped></style>
